<template>
  <div v-for="(item, index) in list" :key="index" class="flex-between m-xs line" @click="toDetail(item)">
    <div class="lable flex-start">
      <div class="flex-center rank-wrap m-r-xs">
        <img v-if="index < 3" :src="getAssetsImages1(`rank/rank_2_${index + 1}.png`)" style="width: 22px" />
        <span v-else class="rank-bg">{{ index + 1 }}</span>
      </div>
      <span style="font-size: 14px">{{ item.ownerUser }}</span>
    </div>
    <div class="value">
      <span class="p-r-xs" style="font-size: 14px">{{ item.rankNum }}</span>
      <van-icon v-if="userInfo.isLeader == 'Y'" name="arrow" color="#999" />
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { reactive, toRefs, onBeforeMount, computed } from 'vue'
import { getAssetsImages } from '@/utils'
export default {
  name: 'rankList',
  emits: ['detail'],
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  setup(props, cxt) {
    const store = useStore()
    const router = useRouter()
    const getAssetsImages1 = getAssetsImages
    const userInfo = computed(() => {
      return store.getters['userInfo']
    })
    const state = reactive({})
    // 仅负责人有该条权限，销售只能看见排行榜信息，无法点击查看他人列表
    const toDetail = (item) => {
      if (userInfo.value.isLeader == 'Y') {
        cxt.emit('detail', item.id)
      }
    }
    onBeforeMount(() => {})

    return {
      ...toRefs(state),
      userInfo,
      toDetail,
      getAssetsImages1
    }
  }
}
</script>
<style lang="less" scoped></style>
